<template>
 <div>
      <el-form :model="updates" ref="updates" label-width="100px" class="demo-ruleForm">
      <el-form-item label="客户姓名" prop="username">
        <el-input v-model="updates.username"></el-input>
      </el-form-item>
      <el-form-item label="客户年龄" prop="age">
        <el-input v-model="updates.age"></el-input>
      </el-form-item>
      <el-form-item label="客户性别" prop="gender">
        <el-radio-group v-model="updates.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>    
      <el-form-item>
        <el-button type @click="ch">确认修改</el-button>
      </el-form-item>
    </el-form>
 </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("cosutomers");
export default {
 computed: {
    ...mapState(["update"]),
  },
  // 接收参数第一种
  created() {
    const sd = this.$route.params._id;
    this.getOneClient(sd);
  },
  data() {
    return {
      updates: {},
    };
  },
  watch: {
    update(val) {
      this.updates = val;
    },
  },
  methods: {
    // 修改客户
    ...mapActions(["updateClient", "getOneClient"]),
    ch() {
      this.updateClient(this.updates);
      this.$confirm(
        "检测到未保存的内容，是否在离开页面前保存修改？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "保存",
          cancelButtonText: "放弃修改",
        }
      )
        .then(() => {
          this.$message({
            type: "info",
            message: "保存修改",
          });
           this.$router.push("/Customerslist")
        })
       
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
        });
    },
  },
}
</script>

<style>
.demo-ruleForm {
  width: 300px;
  margin: auto;
}
</style>